<template>
  <div>
    <!-- 面包屑 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened" >积分商城</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">轮播图管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 添加幻灯片 -->
    <div class="x_button">
      <el-row>
        <el-button @click="add()">添加幻灯片</el-button>
      </el-row>
    </div>
    <!-- 顺序表格 -->
    <div class="x_sequence" style="width:1000px;margin-left:30px;">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="顺序" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.bannerSort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.bannerName }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="链接" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.bannerLink }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="显示" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.bannerState }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
      <!-- 添加轮播 -->
      <el-dialog title="添加轮播" :visible.sync="dialogVisible">
          <AddDialog @setShow="setShow"></AddDialog>
      </el-dialog>
      <!-- 修改轮播 -->
      <el-dialog title="修改轮播" :visible.sync="dialogVisible1">
        <EditDialog @setAppear="setAppear" :editid="editid"></EditDialog>
      </el-dialog>
  </div>
</template>

<script>
import AddDialog from './addDialog.vue'
import EditDialog from './editDialog.vue'
import {getBannerList,delBannerList } from '../../../api'
export default {
  components: {
    AddDialog,
    EditDialog
  },
  data() {
    return {
      // 表格
      tableData: [],
      // 遮罩层
      dialogVisible: false,
      dialogVisible1: false,
      editid:0
    }
  },
  created() {
    getBannerList().then((res) => {
      console.log(res)
       this.tableData = res.data
    })
  },
  methods: {
    // 封装
    encapsulation() {
      getBannerList().then((res) => {
        console.log(res)
        this.tableData = res.data
      })
    },
    add() {
      this.dialogVisible = true
    },
    // 模态框按钮显示隐藏
      // 添加
      setShow(e){
        this.dialogVisible = e
        this.encapsulation()
      },
      // 编辑
      setAppear(e) {
        this.dialogVisible1 = e
        this.encapsulation()
      },

    // 表格
    handleEdit(index, row) {
      // console.log(index, row)
      this.dialogVisible1 = true
      this.editid = row.id
    },
    handleDelete(index, row) {
      // console.log(index, row)
      delBannerList({id: row.id}).then(res => {
        console.log(res)
        this.encapsulation()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.x_button {
  margin: 50px 30px;
}
</style>